<template>
	<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="loadMore" lower-threshold="100"
		show-scrollbar="false" enable-flex="true">
		<view class="goods-list" v-if="products && products.length>0">
			<view class="goods-item" v-for="(item, index) in products" :key="index" @click="clickProduct(item)">
				<image :src="`http://43.248.190.25:8985/`+item.url" class="goods-image"></image>
				<view class="goods-info">
					<view class="goods-title">{{ item.title }}</view>
					<view class="goods-price">{{ item.score }}积分</view>
				</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import config from '@/request/config.js'
	import Nodata from '@/components/Nodata.vue'
	import {
		getProdutList
	} from '@/request/api/product'
	export default {
		components: {
			Nodata
		},
		data() {
			return {
				loading: false, // 是否正在加载
				page: {
					size: 20,
					page: 0
				},
				products: [],
				count: 1,
			}
		},
		methods: {
			loadMore() {
				if (this.loading || this.products.length >= this.count) {
					return; // 如果正在加载或者已经加载完全部数据，则返回
				}
				this.loading = true; // 开始加载
				getProdutList(this.page).then((res) => {
					this.count = res.count
					if (res.data) {
						this.loading = false; // 加载完成
						this.page.page = this.page.page + 1; // 页数增加
						this.products = this.products.concat(res.data)
					}
				})
			},
			clickProduct(product) {
				uni.navigateTo({
					url:'/pages/my/product_details?id='+product.id
				})
			}

		},
		onLoad() {
			this.loadMore()
		}
	}
</script>

<style scoped>
	.scroll-view {
		height: 100%;
		/* 根据实际情况设置高度 */
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 33.333%;
		padding: 10px;
		box-sizing: border-box;
	}

	.goods-image {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
	}

	.goods-info {
		padding-top: 10px;
	}

	.goods-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods-price {
		color: #f55;
	}
</style>